<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="分类" prop="category">
        <el-radio-group v-model="formData.category" v-loading="loading">
          <el-radio-button
            v-for="item in categoryOptions"
            :key="item.name"
            :label="item.name"
          >
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="广告标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入广告标题" />
      </el-form-item>
      <el-form-item label="广告内容" prop="content">
        <el-input    type="textarea" :rows="4" v-model="formData.content" height="150px" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="formData.contact" placeholder="请输入联系方式" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
    import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
    import { AdvertisementsApi, AdvertisementsVO } from '@/api/shequ/Advertisements'
    import {CategoriesApi} from "@/api/shequ/categories";

    /** 广告 表单 */
    defineOptions({ name: 'AdvertisementsForm' })

    const { t } = useI18n() // 国际化
    const message = useMessage() // 消息弹窗

    const dialogVisible = ref(false) // 弹窗的是否展示
    const dialogTitle = ref('') // 弹窗的标题
    const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
    const formType = ref('') // 表单的类型：create - 新增；update - 修改
    const formData = ref({
        id: undefined,
        userId: undefined,
        category: undefined,
        title: undefined,
        content: undefined,
        contact: undefined,
        viewCount: 0,
        status: 1
    })
    const formRules = reactive({
        userId: [{ required: true, message: '发布用户ID不能为空', trigger: 'blur' }],
        category: [{ required: true, message: '分类ID不能为空', trigger: 'change' }],
        title: [{ required: true, message: '广告标题不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '广告内容不能为空', trigger: 'blur' }],
        contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
    })
    const formRef = ref() // 表单 Ref

    /** 打开弹窗 */
    const open = async (type: string, id?: number) => {
        dialogVisible.value = true
        dialogTitle.value = t('action.' + type)
        formType.value = type
        fetchCategories()
        resetForm()
        // 修改时，设置数据
        if (id) {
            formLoading.value = true
            try {
                formData.value = await AdvertisementsApi.getAdvertisements(id)
            } finally {
                formLoading.value = false
            }
        }
    }
    defineExpose({ open }) // 提供 open 方法，用于打开弹窗

    /** 提交表单 */
    const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
    const submitForm = async () => {
        // 校验表单
        await formRef.value.validate()
        // 提交请求
        formLoading.value = true
        try {
            const data = formData.value as unknown as AdvertisementsVO
            if (formType.value === 'create') {
                await AdvertisementsApi.createAdvertisements(data)
                message.success(t('common.createSuccess'))
            } else {
                await AdvertisementsApi.updateAdvertisements(data)
                message.success(t('common.updateSuccess'))
            }
            dialogVisible.value = false
            // 发送操作成功的事件
            emit('success')
        } finally {
            formLoading.value = false
        }
    }

    /** 重置表单 */
    const resetForm = () => {
        formData.value = {
            id: undefined,
            userId: undefined,
            category: undefined,
            title: undefined,
            content: undefined,
            contact: undefined,
            viewCount: 0,
            status: 1
        }
        formRef.value?.resetFields()
    }
    const loading = ref(false)
    // 分类选项
    const categoryOptions = ref([])
    // 获取分类数据
    const fetchCategories = async () => {
        const res = await CategoriesApi.getCategoriesList() // 调用接口
        categoryOptions.value = res.filter(item => item.id !== 1)
        console.log("分类");
    }
</script>
